Liquid Morph
CSS Animation
index.html
Login to Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Morph</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #04050f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Syne', sans-serif;
overflow: hidden;
}
.scene {
position: relative;
width: 420px;
height: 420px;
display: flex;
align-items: center;
justify-content: center;
}
/* Ambient glow rings */
.ring {
position: absolute;
border-radius: 50%;
border: 1px solid;
animation: pulse-ring 4s ease-in-out infinite;
}
.ring-1 { width: 340px; height: 340px; border-color: #ff4d6d22; animation-delay: 0s; }
.ring-2 { width: 380px; height: 380px; border-color: #47fff611; animation-delay: 0.8s; }
.ring-3 { width: 415px; height: 415px; border-color: #ff4d6d08; animation-delay: 1.6s; }
@keyframes pulse-ring {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.04); opacity: 1; }
}
/* SVG blob */
.blob-svg {
width: 300px;
height: 300px;
filter: drop-shadow(0 0 40px #ff4d6d88) drop-shadow(0 0 80px #47fff644);
}
.blob-path {
animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
0% { d: path("M150,60 C190,40 240,70 260,110 C280,150 275,200 255,235 C235,270 195,295 155,295 C115,295 75,270 58,235 C40,200 38,150 58,110 C78,70 110,80 150,60Z"); }
16% { d: path("M150,50 C200,35 250,80 265,125 C280,170 265,215 240,248 C215,281 175,298 138,292 C101,286 68,258 52,220 C36,182 42,138 65,105 C88,72 100,65 150,50Z"); }
33% { d: path("M150,65 C185,42 235,65 258,108 C281,151 278,205 252,240 C226,275 185,295 148,290 C111,285 72,262 55,225 C38,188 45,143 68,108 C91,73 115,88 150,65Z"); }
50% { d: path("M150,55 C195,38 248,78 268,122 C288,166 278,218 252,250 C226,282 185,300 145,294 C105,288 68,262 50,224 C32,186 40,140 64,106 C88,72 105,72 150,55Z"); }
66% { d: path("M150,62 C192,40 244,72 262,116 C280,160 272,212 248,244 C224,276 184,298 146,294 C108,290 70,264 54,226 C38,188 44,142 68,107 C92,72 108,84 150,62Z"); }
83% { d: path("M150,58 C188,38 242,74 264,118 C286,162 276,214 250,247 C224,280 183,298 145,293 C107,288 68,261 52,222 C36,183 42,138 66,104 C90,70 112,78 150,58Z"); }
100% { d: path("M150,60 C190,40 240,70 260,110 C280,150 275,200 255,235 C235,270 195,295 155,295 C115,295 75,270 58,235 C40,200 38,150 58,110 C78,70 110,80 150,60Z"); }
}
/* Gradient fill */
.blob-path {
fill: url(#blobGrad);
}
/* Spin the inner texture */
.blob-texture {
animation: spin-slow 12s linear infinite;
transform-origin: 150px 150px;
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Label */
.label {
margin-top: 2.5rem;
color: #ffffff18;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.label span { color: #ff4d6d; }
</style>
</head>
<body>
<div class="scene">
<div class="ring ring-1"></div>
<div class="ring ring-2"></div>
<div class="ring ring-3"></div>
<svg class="blob-svg" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="blobGrad" cx="38%" cy="32%" r="70%">
<stop offset="0%" stop-color="#ff4d6d"/>
<stop offset="45%" stop-color="#c9184a"/>
<stop offset="100%" stop-color="#47fff6" stop-opacity="0.6"/>
</radialGradient>
<radialGradient id="innerGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<clipPath id="blobClip">
<path class="blob-path clip-path"
d="M150,60 C190,40 240,70 260,110 C280,150 275,200 255,235 C235,270 195,295 155,295 C115,295 75,270 58,235 C40,200 38,150 58,110 C78,70 110,80 150,60Z"/>
</clipPath>
</defs>
<!-- Main blob -->
<path class="blob-path"
d="M150,60 C190,40 240,70 260,110 C280,150 275,200 255,235 C235,270 195,295 155,295 C115,295 75,270 58,235 C40,200 38,150 58,110 C78,70 110,80 150,60Z"/>
<!-- Shimmer overlay clipped to blob -->
<g clip-path="url(#blobClip)">
<g class="blob-texture">
<circle cx="120" cy="110" r="55" fill="white" opacity="0.07"/>
<circle cx="170" cy="80" r="35" fill="white" opacity="0.05"/>
<circle cx="100" cy="155" r="30" fill="white" opacity="0.04"/>
</g>
<!-- Highlight -->
<ellipse cx="115" cy="105" rx="42" ry="28" fill="white" opacity="0.18" transform="rotate(-25,115,105)"/>
</g>
</svg>
</div>
<p class="label"><span>liquid</span> morph</p>
</body>
</html>